﻿<UserControl x:Class="YiJing.Views.HexagramView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" 
             d:DesignHeight="200" d:DesignWidth="300" Grid.IsSharedSizeScope="true">
    <UserControl.Resources>
        <BooleanToVisibilityConverter x:Key="VisibilityConverter"/>
        
        <Style x:Key="LineCheckBox" TargetType="CheckBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CheckBox">
                        <Grid Height="{TemplateBinding Height}" SnapsToDevicePixels="True">
                            <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}"  />
                            <Grid>
                                <Grid.Resources>
                                    <Style TargetType="Rectangle">
                                        <Setter Property="Fill" Value="DarkSlateBlue" />
                                        <Setter Property="StrokeThickness" Value="0" />
                                    </Style>
                                </Grid.Resources >
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="5*" />
                                    <ColumnDefinition Width="3*" />
                                    <ColumnDefinition Width="5*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <Rectangle Grid.Column="0" />
                                <Rectangle Grid.Column="2"/>
                                <Rectangle Grid.Column="0" Grid.ColumnSpan="3" Name="Full" />
                            </Grid>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="Full" Property="Visibility" Value="Hidden" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="SpotCheckBox" TargetType="CheckBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CheckBox">
                        <Grid SnapsToDevicePixels="True">
                            <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}"  />
                            <Ellipse Name="Spot" Fill="DarkSlateBlue" VerticalAlignment="Center" Width="{TemplateBinding Width}" Height="{TemplateBinding Width}" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="false">
                                <Setter TargetName="Spot" Property="OpacityMask" Value="#00000000" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <DataTemplate x:Key="LineVisual" DataType="Line">
            <Grid Margin="0,3,0,3" SnapsToDevicePixels="true">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition />
                </Grid.RowDefinitions>
                <CheckBox IsChecked="{Binding IsBroken}" Style="{StaticResource LineCheckBox}" Margin="19,0,0,0"/>
                <CheckBox IsChecked="{Binding IsMoving}" Style="{StaticResource SpotCheckBox}" Margin="4,0,0,0" Width="15" Grid.Column="1" />
            </Grid>
        </DataTemplate>

    </UserControl.Resources>
    <Grid Margin="8">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="4*" />
            <ColumnDefinition Width="7*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="4*" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <ItemsControl ItemsSource="{Binding Path=Figure.Lines}"  Grid.Column="1" Grid.RowSpan="3" ItemTemplate="{StaticResource LineVisual}" Margin="6,0,6,0" IsTabStop="false">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="1" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>

        <ItemsControl ItemsSource="{Binding Trigrams}" Grid.Column="1" Grid.RowSpan="3" IsHitTestVisible="False" IsTabStop="false" 
                      Visibility="{Binding Path=ShowTrigramDetails,Converter={StaticResource VisibilityConverter}}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                    </Grid>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemContainerStyle>
                <Style>
                    <Setter Property="Grid.RowSpan" Value="3" />
                    <Setter Property="Grid.Row" Value="{Binding Position}" />
                </Style>
            </ItemsControl.ItemContainerStyle>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border x:Name="Hilite" BorderThickness="3" BorderBrush="#FF3399FF" Margin="-2" CornerRadius="4" Background="#803399FF" IsHitTestVisible="false" Visibility="Hidden">
                    </Border>
                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding IsSelected}" Value="true">
                            <DataTrigger.Setters>
                                <Setter TargetName="Hilite" Property="Visibility" Value="Visible" />
                            </DataTrigger.Setters>
                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

        <ListBox x:Name="Trigrams" Grid.RowSpan="3" BorderThickness="0" Margin="0,10,0,10" ScrollViewer.VerticalScrollBarVisibility="Disabled" SelectedItem="{Binding SelectedTrigram}"
            Visibility="{Binding Path=ShowTrigramDetails,Converter={StaticResource VisibilityConverter}}">
            <ListBox.Template>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <Grid SnapsToDevicePixels="true">
                        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Grid>
                </ControlTemplate>
            </ListBox.Template>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="1" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemContainerStyle>
                <Style TargetType="{x:Type ListBoxItem}">
                    <Setter Property="IsSelected" Value="{Binding Mode=TwoWay, Path=IsSelected}"/>
                    <Setter Property="FocusVisualStyle" Value="{x:Null}" />                    
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                <Border x:Name="ItemPane" BorderThickness="2,2,0,2" Margin="2,4,0,4" MaxHeight="40" SnapsToDevicePixels="true" >
                                    <ContentPresenter  />
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="true">
                                        <Setter TargetName="ItemPane" Property="Background" Value="#FF3399FF" />
                                        <Setter TargetName="ItemPane" Property="BorderBrush" Value="#FF3399FF" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock x:Name="ItemText" Text="{Binding Header}" Padding="16,0,0,0" VerticalAlignment="Center" Foreground="LightGray" SnapsToDevicePixels="true" />
                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding IsSelected}" Value="true" >
                            <Setter TargetName="ItemText" Property="Foreground" Value="White" />
                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>


    </Grid>
</UserControl>
